<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>notify</title>
        <link type="text/css" rel="stylesheet" href="../../dist/cute.css"/>
        <style type="text/css">
            .m8 {
                margin: 28px;
            }
            .notify {
                margin-bottom: 8px;
            }
        </style>
    </head>
    <body>
        <div class="notify notify-nob notify-condensed">
            Well done! You successfully read this important alert message.
        </div>

        <div class="m8">
            <div class="notify">
                <i class="icon icon-info"></i>&nbsp;Warning! Best check yo self, you're not looking too good.
            </div>
        </div>

        <div class="m8">
            <div class="notify notify-info notify-close">
                <i class="close" title="关闭">&times;</i>
                Warning! Best check yo self, you're not looking too good.Warning! Best check yo self, you're not looking too good.Warning! Best check yo self, you're not looking too good.Warning! Best check yo self, you're not looking too good.Warning! Best check yo self, you're not looking too good.
            </div>
        </div>

        <div class="m8">
            <div class="notify notify-success">
                Well done! You successfully read this important alert message.
            </div>
            <div class="notify notify-info notify-close">
                <i class="close" title="关闭">&times;</i>
                Heads up! This alert needs your attention, but it's not super important.
            </div>
            <div class="notify notify-warn notify-close">
                <i class="close" title="关闭">&times;</i>
                Warning! Best check yo self, you're not looking too good.
            </div>
            <div class="notify notify-error">
                Oh snap! Change a few things up and try submitting again.
            </div>
        </div>

        <div class="m8">
            <div class="notify notify-success">
                <div class="notify-title">I am notify title ...</div>
                Well done! You successfully read <a class="notify-link" href="#">this important alert message</a>.
            </div>
            <div class="notify notify-info notify-close">
                <i class="close" title="关闭">&times;</i>
                <div class="notify-title"><i class="icon icon-blocked"></i>&nbsp;I am notify title ...</div>
                Heads up! This <a class="notify-link" href="#">alert needs your attention</a>, but it's not super important.
            </div>
            <div class="notify notify-warn notify-close">
                <i class="close" title="关闭">&times;</i>
                <div class="notify-title">I am notify title ...</div>
                Warning! Best check yo self, you're <a class="notify-link" href="#">not looking too good</a>.
            </div>
            <div class="notify notify-error">
                <div class="notify-title">I am notify title ...</div>
                Oh snap! <a class="notify-link" href="#">Change a few things up</a> and try submitting again.
            </div>
        </div>
    </body>
</html>

